<template>
  <div class="container">
      <div class="head">
          <div class="img">
              <img src="../../assets/NJUST.jpeg" />
          </div>
          <div class="person">
              <img src="../../assets/用户名.png" />
              <li class="li1"><router-link to="/person"><span>个人主页</span></router-link></li>
          </div>
          <div class="list">
              <img src="../../assets/购物车.png" />
              <li class="li1"><router-link to="/sample"><span>我的清单</span></router-link></li>
          </div>
      </div>
      <div class="crumbs">
          <nav>
               <router-link to="/home1"><span>首页</span><span>/</span></router-link>
             <router-link to="/home1"><span>{{ staName}}</span><span>/</span></router-link>
             <router-link :to="{
               name: 'Home2', 
               params: {
        param:this.staId,
        param1: this.staName,
             }
            }"><span>{{ pjName}}</span><span>/</span></router-link>
             <router-link :to="{
               name: 'module', 
               params: {
        staName: this.staName,
        pjName: this.pjName,
        pjId: this.pjId,
        staId:this.staId
             }
            }"><span>设备</span></router-link>
          </nav>
          <!--<img src="@/assets/返回.png" alt="Back"  />-->
          
      </div>
      <div class="equipment-list">
          <div class="header">设备列表</div>
          <el-table :data="filteredData" style="width: 60%; margin: 20px auto;" @tab-click="handleTabClick">
              <el-table-column prop="eId" label="序号" ></el-table-column>
              <el-table-column prop="eName" label="设备名称"></el-table-column>
              <el-table-column prop="eUnit" label="单位"></el-table-column>
              <el-table-column label="操作">
                  <template slot-scope="scope">
                      <el-button type="text" @click="handleViewDetails(scope.row)">查看详情</el-button>
                  </template>
              </el-table-column>
          </el-table>
          <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :total="totalItems"
          class="pagination-centered">
          </el-pagination>
          <!-- <router-link to="/module">
              <div class="back-button" >
                  <img src="@/assets/返回.png" alt="Back" class="back-icon" />
              </div>
          </router-link> -->
      </div>

      <div class="chatbot">
          <img src="../../assets/客服.png" />
          <span class="chatbot-text">未找到所需内容？</span>
          <a href="#" class="chatbot-link" @click="toggleChatbot">点我留言</a>
      </div>

      <!-- 遮罩层 -->
      <div v-if="isChatbotVisible" class="chatbot-mask"></div>

      <!-- 弹出框 -->
      <div v-if="isChatbotVisible" class="chatbot-popup">
          <h2>留言板</h2>
          <textarea v-model="message" rows="4" cols="50" placeholder="请输入您的留言..."></textarea>
          <div class="popup-actions">
              <el-button type="primary" @click="submitMessage">提交留言</el-button>
              <el-button @click="toggleChatbot">关闭</el-button>
          </div>
      </div>
  </div>
</template>

<script>
export default {
data() {
  return {
    isChatbotVisible: false, // 控制弹出框显示
    message: '', // 绑定留言内容
staName:'',
    pjName:'',
    pjId:'',
    staId:'',
    equipmentData: [
      // { index: 1, name: '气流分析仪 (PF-300 PRO)', unit: '台' },
      // { index: 2, name: '过滤效率测试仪', unit: '台' },
      // { index: 3, name: '呼吸阻力测试仪', unit: '台' },
      // ...其他设备数据
    ],
    currentData: [],//初始化为第一个列表的传入数据
    pageSize: 5,//一页显示的数据数
    currentPage: 1,//当前页，初始化为第一页，点击则更新
    totalItems: 0,
  };
},
created() {

this.staName=this.$route.params.staName;
    this.pjName=this.$route.params.pjName;
    this.pjId=this.$route.params.pjId;
    this.staId=this.$route.params.staId;
this.$http.get("/EquipmentList", {
      params: {
        pjId: this.pjId
      }
    }).then((result) => {
      console.log(result.data);
      this.equipmentData = result.data;
      this.currentData = this.equipmentData;
      this.totalItems = this.equipmentData.length;
    });
},
computed: {
  filteredData() {
    const start = (this.currentPage - 1) * this.pageSize;
    const end = this.currentPage * this.pageSize;
    return this.currentData.slice(start, end);
  },
},
methods: {
  handleViewDetails(row) {
      console.log('查看详情', row);
   this.$router.push({
      name: 'device-scheme', // 假设详情页面的路由路径是 /details/
      params: { staName:this.staName,pjName:this.pjName,staId:this.staId,pjId:this.pjId,eId:row.eId,eName:row.eName } // 假设每行数据有一个唯一的 id 属性
    });
 },
 handlePageChange(newPage) {
    console.log('当前页码', newPage);
   // 在这里添加分页逻辑
    this.currentPage=newPage;
  },
  //点击表格事件
  handleTabClick(tab, event) {
    this.activeTab = tab.name;//;
    this.currentData = this.equipmentData;
    this.totalItems=this.currentData.length;
    this.currentPage = 1; // 重置当前页为第一页
  },
  toggleChatbot() {
    this.isChatbotVisible = !this.isChatbotVisible; // 切换弹出框显示状态
 },
 submitMessage() {
      // 提交留言的逻辑
      console.log('留言内容:', this.message);
      // 可以在这里添加代码将留言发送到服务器
      this.$http.put(`/insertFeedback/${this.message}`).then((response)=>{
          
      }),
      this.isChatbotVisible = false; // 提交后隐藏弹出框
      this.message = ''; // 清空留言内容

      // 添加弹窗提示留言成功的逻辑
      this.$alert('留言成功！', '成功', {
        confirmButtonText: '确定',
        type: 'success'
      });
    },
}
};
</script>

<style scoped>
.container {
  width: 100%;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

.head {
  width: 100%;
  background-color: #abe0f3;
  height: 6vh;
}

  .head .img {
    height: 100%;
    float: left;
  }

    .head .img img {
      height: 100%;
    }

  .head .list {
    float: right;
    height: 45%;
  }

    .head .list img {
      margin-top: 15px;
      margin-right: 7px;
      height: 100%;
      float: left;
    }

    .head .list li {
      margin-top: 20px;
      margin-right: 40px;
      display: block;
      float: left;
      font-size: 18px;
    }

  .head .person {
    float: right;
    height: 42%;
  }

    .head .person img {
      margin-top: 15px;
      margin-right: 7px;
      height: 100%;
      float: left;
    }

    .head .person li {
      margin-top: 20px;
      margin-right: 70px;
      display: block;
      float: left;
      font-size: 18px;
    }


.nav a {
  margin-left: 10px;
  text-decoration: none;
  color: #000;
}

  .nav a.active {
    background-color: #555;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
  }

.crumbs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f0f0f0;
}
.back-button {
  float: right;
  margin-top: 70px;
  margin-right: -100px;
}

  .back-button img {
    height: 60px;
    cursor: pointer; /* 当鼠标悬停时显示为手型 */
  }
.equipment-list {
  width: 90%;
  max-width: 1200px;
  margin: auto;
  background-color: #f5f5f5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.header {
padding: 15px 25px;
background-color: #fff;
color: #333;
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid #eaeaea;
text-align: left; /* 左对齐 */
}
.pagination-centered {
text-align: center;
margin-top: 20px;
}
.chatbot {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background-color:#f9f9f9 ;/* */
  padding: 10px;
  border-radius: 5px;
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}
.chatbot img{
  width: 70px;
}
.chatbot-text {
  margin-right: 10px; /* 与链接间距 */
}
.chatbot-link {
  color: black; /* 设置链接颜色为黑色 */
  text-decoration: underline; /* 添加下划线 */
  font-size: 16px; /* 设置字体大小 */
  transition: color 0.3s; /* 平滑颜色变化 */
}

.chatbot-link:hover,
.chatbot-link:focus,
.chatbot-link:active {
  color: black; /* 悬停、聚焦、点击时颜色不变 */
  text-decoration: underline; /* 保持下划线 */
}
.chatbot-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 灰色半透明遮罩 */
  z-index: 999; /* 遮罩层在弹出框下一层 */
}

.chatbot-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  z-index: 1000; /* 确保弹出框在最上层 */
}
.popup-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.chatbot-popup h2 {
  margin-top: 0; /* 移除标题的上边距 */
}

.chatbot-popup textarea {
  width: 100%;
  margin-bottom: 10px;
}

</style>